<template>
  <div id="createRoom">
    <a-card :body-style="{margin: '0 auto'}" style="width: 600px; margin: 0 auto; border-radius: 20px">
      <a-form :model="form" label-align="left" :style="{width: '500px', margin: '0 auto'}" auto-label-width
              @submit="handleSubmit">
        <a-form-item field="avatar" label="房间头像">
          <a-upload
              action="/"
              :fileList="file ? [file] : []"
              :show-file-list="false"
              @change="onChange"
              @progress="onProgress">
            <template #upload-button>
              <div
                  :class="`arco-upload-list-item${file && file.status === 'error' ? ' arco-upload-list-item-error' : ''}`">
                <div
                    class="arco-upload-list-picture custom-upload-avatar"
                    v-if="file && file.url"
                >
                  <img :src="file.url"/>
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit/>
                  </div>
                  <a-progress
                      v-if="file.status === 'uploading' && file.percent < 100"
                      :percent="file.percent"
                      type="circle"
                      size="mini"
                      :style="{
                        position: 'absolute',
                        left: '50%',
                        top: '50%',
                        transform: 'translateX(-50%) translateY(-50%)',
                      }"
                  />
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus/>
                    <div style="margin-top: 10px; font-weight: 600">Upload</div>
                  </div>
                </div>
              </div>
            </template>
          </a-upload>
        </a-form-item>
        <a-form-item field="name" label="房间名字">
          <a-input v-model="form.name" placeholder="取一个独一无二的名字"/>
        </a-form-item>
        <a-form-item field="name" label="房间描述">
          <a-input v-model="form.name" placeholder="简单描述一下你的房间，让更多的人加入进来"/>
        </a-form-item>
        <a-form-item field="name" label="最大人数">
          <a-slider v-model="form.maxMembers" max="50" min="1" :default-value="1" :show-ticks="true" show-input />
        </a-form-item>
        <a-form-item field="name" label="房间类型">
          <a-select placeholder="选择房间的类型" v-model="form.type">
            <a-option v-for="option in roomTypeOptions" :key="option.code" :value="option.code">
              {{ option.text }}（{{ option.description }}）
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="form.type === RoomTypeEnum.SECRET.code" field="password" label="房间密码">
          <a-input v-model="form.password" placeholder="输入房间密码"/>
        </a-form-item>
        <a-form-item field="tags" label="房间标签">
          <a-input-tag v-model="form.tags" placeholder="回车输入房间标签"/>
        </a-form-item>
        <a-form-item field="expireTime" label="过期时间">
          <a-date-picker
              show-time
              :time-picker-props="{ defaultValue: '09:09:06' }"
              format="YYYY-MM-DD HH:mm:ss"
              @change="onExpireTimeChange"
              :disabledDate="(current) => moment(current).isBefore(moment())"
              @select="onSelect"
              @ok="onOk"
              placeholder="选择房间过期时间"
          />
        </a-form-item>
        <a-form-item field="tags" label="房间状态">
          <a-radio-group>
            <a-radio value="A">正常</a-radio>
            <a-radio value="C">禁止加入</a-radio>
            <a-radio value="B">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button html-type="submit" type="primary">保存</a-button>
            <a-button html-type="submit" type="primary" status="danger">解散</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {RoomTypeEnum} from "../../common/enums/room.js";
import moment from "moment";

const form = ref({
  name: "",
  avatar: "",
  description: "",
  tags: [],
  maxMembers: "",
  type: "",
  password: "",
  expireTime: "",
});
const roomTypeOptions = ref([]);
const file = ref();

const onChange = (_, currentFile) => {
  file.value = {
    ...currentFile,
    // url: URL.createObjectURL(currentFile.file),
  };
};
const onProgress = (currentFile) => {
  file.value = currentFile;
};

onMounted(() => {
  Object.keys(RoomTypeEnum).forEach((key) => {
    roomTypeOptions.value.push(RoomTypeEnum[key]);
  })
})

</script>

<style scoped>

</style>
